@charset "UTF-8";

//*******变量*******//
//文字
@fs: 12px;  //默认字体大小
@ms: "Microsoft YaHei";   //微软雅黑
@song: SimSun;   //宋体
@arial: Arial;   //Arial
@tahoma: Tahoma;   //Tahoma
@left: left;
@right: right;
@center: center;
//颜色
@white: #fff;
@red: #f00;
@black: #000;
@c1: #111;
@c3: @c1*3;
@c6: @c1*6;
@c9: @c1*9;
@newColor:#0071ce;
//*******函数*******//
//文字
.fs(@fs){
    font-size: @fs;
}
.fw(@fw:bold){
    font-weight: @fw;
}
.fStyle(@fStyle:italic){
    font-style: @fStyle;
}
.ff(@ff:@ms){
    font-family: @ff;
}
.color(@color:@white){
    color: @color;
}
.tl(){
    text-align: left;
}
.tr(){
    text-align: right;
}
.tc(){
    text-align: center;
}
.vert(@pos:middle){
    vertical-align: @pos;
}
.lineH(@h){
    line-height: @h;
}
.tIndent(@len: -9999px){
    text-indent: @len;
}
.ms(){
    font-family: @ms;
}
.song(){
    font-family: @song;
}
.arial(){
    font-family: @arial;
}
.tahoma(){
    font-family: @tahoma;
}
.elli(){
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

//浮动
.clearboth(){
    zoom: 1;
    &:after{
        content: "";
        display: block;
        overflow: hidden;
        clear: both;
    }
}
.fl(){
    float: @left;
}
.fr(){
    float: @right;
}
.fNone(){
    float: none;
}

//display
.block(){
    display: block;
}
.inline(){
    display: inline;
}
.inBlock(){
    display: inline-block;
}
.none(){
    display: none;
}

//overflow
.of(){
    overflow: hidden;
}

//定位
.abs(@left: 0,@top: 0){
    position: absolute;
    top: @top;
    left: @left;
}
.absR(@right: 0,@top: 0){
    position: absolute;
    top: @top;
    right: @right;
}
.absB(@left: 0,@bottom: 0){
    position: absolute;
    bottom: @bottom;
    left: @left;
}
.absRB(@right: 0,@bottom: 0){
    position: absolute;
    bottom: @bottom;
    right: @right;
}
.fixed(@left: 0,@top: 0){
    position: fixed;
    top: @top;
    left: @left;
}
.fixedR(@right: 0,@top: 0){
    position: fixed;
    top: @top;
    right: @right;
}
.fixedB(@left: 0,@bottom: 0){
    position: fixed;
    bottom: @bottom;
    left: @left;
}
.fixedRB(@right: 0,@bottom: 0){
    position: fixed;
    bottom: @bottom;
    right: @right;
}
.rel(){
    position: relative;
}
.static(){
    position: static;
}

//CSS3
.transition(@time: .3s){
    -webkit-transition: all @time;
    -moz-transition: all @time;
    -o-transition: all @time;
    transition: all @time;
}
.translate(@len){
    -webkit-transform: translate(@len);
    -moz-transform: translate(@len);
    -o-transform: translate(@len);
    transform: translate(@len);
}
.translate(@len1,@len2){
    -webkit-transform: translate(@len1,@len2);
    -moz-transform: translate(@len1,@len2);
    -o-transform: translate(@len1,@len2);
    transform: translate(@len1,@len2);
}
.scale(@times){
    -webkit-transform: scale(@times);
    -moz-transform: scale(@times);
    -o-transform: scale(@times);
    transform: scale(@times);
}
.rotate(@deg){
    -webkit-transform: rotate(@deg);
    -moz-transform: rotate(@deg);
    -o-transform: rotate(@deg);
    transform: rotate(@deg);
}
.anim(@name,@time,@count){
    animation: @name @time @count;
    -webkit-animation: @name @time @count;
    -moz-animation: @name @time @count;
    -o-animation: @name @time @count;
}

//边框
.border(@color:#eee){  
    border: 1px solid @color;
}
.borderL(@color:#eee){  
    border-left: 1px solid @color;
}
.borderR(@color:#eee){  
    border-right: 1px solid @color;
}
.borderT(@color:#eee){  
    border-top: 1px solid @color;
}
.borderB(@color:#eee){  
    border-bottom: 1px solid @color;
}
.bRadius(@len:100%){  //边角弧度
    border-radius: @len;
}
.bSizing(){
    box-sizing: border-box;
}


//阴影
.bShadow(@l,@t,@len,@color){
    box-shadow: @l @t @len @color;
    -webkit-box-shadow: @l @t @len @color;
    -moz-box-shadow: @l @t @len @color;
}

//宽高
.w(@w){
    width: @w;
}
.h(@h){
    height: @h;
}
.wh(@w:100%,@h:100%){
    width: @w;
    height: @h;
}

//内外边距
.m(@m){
    margin: @m;
}
.m(@m1,@m2){
    margin: @m1 @m2;
}
.m(@m1,@m2,@m3){
    margin: @m1 @m2 @m3;
}
.m(@m1,@m2,@m3,@m4){
    margin: @m1 @m2 @m3 @m4;
}
.ml(@ml){
    margin-left: @ml;
}
.mr(@mr){
    margin-right: @mr;
}
.mt(@mt){
    margin-top: @mt;
}
.mb(@mb){
    margin-bottom: @mb;
}
.p(@p){
    padding: @p;
}
.p(@p1,@p2){
    padding: @p1 @p2;
}
.p(@p1,@p2,@p3){
    padding: @p1 @p2 @p3;
}
.p(@p1,@p2,@p3,@p4){
    padding: @p1 @p2 @p3 @p4;
}
.pl(@pl){
    padding-left: @pl;
}
.pr(@pr){
    padding-right: @pr;
}
.pt(@pt){
    padding-top: @pt;
}
.pb(@pb){
    padding-bottom: @pb;
}

//背景
.bg(@url,@l,@t){
    background: url(@url) no-repeat @l @t;
}
.bgColor(@color){
    background-color: @color;
}
.bgSize(@size:100%){
    background-size: @size;
}

//鼠标样式
.cursor(@cursor:pointer){
    cursor: @cursor;
}
